/* eslint-disable semi */
/* eslint-disable semi */
/* eslint-disable quotes */
<template>
    <van-pull-refresh class="showLogin"
                      v-model="isLoading">
        <div class="TopList">

            <div class="TopList-span">
                <span> 欢迎登录 </span>

            </div>

        </div>

        <div class="banner"
             ref="scroll">
            <!-- 轮播图 -->
            <div id="topBanner"
                 class="hello-1">

                <van-cell-group class="cell-Group">

                    <van-field v-model="username"
                               class="cell-List"
                               label="账号"
                               placeholder="请输入账号,字母+数字组合" />
                    <van-field v-model="password"
                               type="password"
                               class="cell-List"
                               label="密码"
                               placeholder="请输入密码" />

                </van-cell-group>

            </div>

            <!-- 中间秒杀图片 -->

            <div class="lastadd">

                <van-button class="add-button"
                            color="#41D08C"
                            round
                            type="info"
                            @click="tologin()">立即登陆</van-button>

            </div>

            <div class="Other">

                <span class="Other-left"
                      @click="Toregistration()">快速注册</span>
                <span class="Other-right"
                      @click="Toforget">忘记密码</span>
            </div>
        </div>
    </van-pull-refresh>
</template>

<script>
import TabBar from "./TabBar.vue";
//import Bus from "./Bus.js";
//引入其他子组件
export default {
    components: {
        TabBar
    },
    // eslint-disable-next-line space-before-function-paren
    data() {
        return {
            count: 0,
            isLoading: false,
            index: 0,
            username: "",
            password: "",
            username1: ["111aaa", "222bbb", "333ccc"],
            password1: ["111aaa", "222bbb", "333ccc"],
            bannerimages: [
                { id: 0, imgSrc: require("../assets/images/a16.jpg") }
                // { id: 1, imgSrc: require("../assets/images/a18.jpg") }
            ],
            middleimages: [{ id: 0, imgSrc: require("../assets/images/none.png") }]
        };
    },

    mounted() {
        // 上拉加载
    },
    // eslint-disable-next-line space-before-function-paren
    // created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中
    created() { },

    methods: {
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file);
        },
        //弹出提示
        showToast() {
            this.$toast({
                message: "请输入18位二代身份证号"
            });
        },

        Toregistration() {
            this.$router.push({ path: "/Registration" });
        },
        Toforget() {
            this.$router.push({ path: "/Forget" });
        },

        validator(val) {
            return /1\d{10}/.test(val);
        },

        tologin() {
            //规则验证
            //账号校验  账号必须为6-20位字母和数字组合
            if (!/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/.test(this.username)) {
                this.$toast({
                    message: "账号格式错误"
                });

                //密码校验 请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种
            } else if (
                !/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(
                    this.password
                )
            ) {
                this.$toast({
                    message: "密码格式错误"
                });
            }
            //账号密码验证
            else {
                let getnum = false;
                for (var i = 0; i < this.username1.length; i++) {
                    if (this.username == this.username1[i]) {
                        getnum = true;
                        if (this.password == this.password1[i]) {
                            // this.$router.push({ path: "/HamDivision" });
                            this.$router.push({
                                name: "HamDivision",
                                params: { status: "1" }
                            });
                        } else {
                            this.$toast({
                                message: "密码错误！"
                            });
                        }
                    }

                    if (getnum == false) {
                        this.$toast({
                            message: "账号错误！"
                        });
                    }
                }
            }
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* //自定义.css的样式路径 */
/* @import "../css/HomePage.css"; */

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #f6f6f6;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    display: block;
}
div {
    display: block;
    box-sizing: border-box;
}
.shadow {
    height: 9px;
    width: 100%;
    background: #f6f6f6;
}

.showLogin {
    background: #ffffff;
    padding-top: 100px;
}

.TopList {
    color: #41d08c;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 46px;
}
.Backlink {
    margin-top: 15px;
    margin-left: 15px;
    color: #888;
}
.TopList-span {
    display: flex;
    height: 20px;
    margin-top: 0px;
    margin-left: 135px;

    width: 60%;
}

.banner {
    width: 100%;
    height: 100%;
}
.hello-1 {
    width: 100%;
    height: auto;
    padding: 0 2.6%;
    background-color: #ffffff;
    text-align: left;
}

.hello-1 img {
    width: 99%;
    height: 150px;
    border-radius: 10px;
    pointer-events: none;
}

.lastadd {
    background: #fff;
    width: 100%;
    padding: 30px 6% 0;
}
.add-button {
    width: 100%;
    font-size: 18px;
    letter-spacing: 1px;
    height: 42px;
    line-height: 42px;
}

li {
    position: absolute;
}

.cell-Group {
    height: auto;
    font-size: 18px;
}
.van-cell--required::before {
    position: absolute;
    left: 0px;
    color: #ee0a24;
    font-size: 18px;
    content: '*';
}
.cell-List {
    height: 75px;
    padding-top: 10px;
    line-height: 30px;
    font-size: 18px;
    padding-left: 8px;
    margin-bottom: 15px;
}
.cell-List span {
    margin-bottom: 10px;
}
.cell-List input {
    font-size: 16px;
    color: #888;
}
.updateImg {
    margin-top: 15px;
    margin-left: 95px;
}

.Other {
    width: 100%;
    color: #555;
    font-size: 14px;
    display: flex;
}
.Other-left {
    display: flex;
    width: 30%;
    text-align: left;
    padding-left: 35px;
    margin-top: 15px;
}
.Other-right {
    margin-top: 15px;
    display: flex;
    width: 40%;
    text-align: right;
    padding-left: 185px;
}
</style>
